<script setup>
import TheButton from "../components/TheButton.vue";
import { ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

//登录数据绑定
let email = ref("");
let username = ref("");
let password = ref("");
let agreementCheck = ref(false);

//创建store,router
const store = useStore();
const router = useRouter();

//处理注册部分
const register = async () => {
  if (!agreementCheck.value) {
    alert("请勾选协议");
    return;
  }
  await store.dispatch("registerUser", {
    email: email.value,
    username: username.value,
    password: password.value,
  });
  router.replace("/");
};

//处理登录部分
const login = async () => {
  await store.dispatch("loginUser", {
    email: email.value,
    password: password.value,
  });
  router.replace("/");
};

const isLogin = ref(false);
</script>
<template>
  <div class="loginPage">
    <div class="phoneImage">
      <img src="../assets/phone.png" />
    </div>
    <div class="loginForm">
      <img src="../assets/logo.svg" alt="" />
      <form @submit.prevent>
        <input type="email" placeholder="邮箱" v-model="email" />
        <input
          v-if="!isLogin"
          type="text"
          placeholder="用户名"
          v-model="username"
        />
        <input type="password" placeholder="密码" v-model="password" />
        <TheButton
          class="loginButton"
          @click="isLogin ? login() : register()"
          >{{ isLogin ? "登录" : "注册" }}</TheButton
        >
        <p @click="isLogin = !isLogin" class="info">
          {{ isLogin ? "还没有注册？点击注册" : "已有账号？点击登录" }}
        </p>
        <div v-if="!isLogin" class="agreement">
          <input
            v-model="agreementCheck"
            type="checkbox"
          />勾选表示同意隐私协议和使用规范
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
.loginPage {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* gap: 5vw; */
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background: #f8f9fb;
}

.phoneImage {
  max-width: 400px;
  position: relative;
  top: 36px;
}

.loginForm {
  display: grid;
  /* grid-template-rows: repeat(6, 1fr); */
  place-items: center;
  row-gap: 52px;
  width: 380px;
  border-radius: 32px;
  padding: 74px 60px;
  background: white;

  box-shadow: 0 4px 48px rgba(0, 0, 0, 0.06);
}

.loginForm > form {
  display: grid;
  row-gap: 24px;
  width: 100%;
  height: 100%;
}

input {
  background: #fafafa;
  border: none;
  border-radius: 5px;
}

input::placeholder {
  color: #9e9e9e;
}
</style>
